<template>
  <div>
    <van-search
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
    />

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" class="banner-img"/>
      </van-swipe-item>
    </van-swipe>
    
    <div class="list">
      <ListItem 
        v-for="v in list" 
        :key="v.id" 
        :v="v"
        @handleClick="toDetail(v.id)"
        ></ListItem>
    </div>
  </div>
</template>


<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
import { mapState } from 'vuex'
import ListItem from '@/components/ListItem'
Vue.use(Lazyload);

export default {
  methods: {
    toDetail(id) {
      // this.$router.push({ name: 'detail', params: { id } })
      this.$router.push(`/detail/${id}`)
    }
  },
  computed: {
    ...mapState(['list'])
  },
	created() {
		this.$store.dispatch({ type: 'GET_LIST' })	
	},
  data() {
    return {
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
        'https://img01.yzcdn.cn/vant/apple-3.jpg',
        'https://img01.yzcdn.cn/vant/apple-4.jpg',
      ],
    };
  },
  components: {
    ListItem
  }
};
</script>



<style scoped lang="scss">
.banner-img {
	width: 100%;
	height: 200px;
}

.list {
  display: flex;
  flex-wrap: wrap;
}
</style>